import { useQuery } from "@tanstack/react-query"
import type { Options } from "ky"
import ky from "ky"
import { useEffect } from "react"


const kyInstance = ky.create({
  prefixUrl: '/api',
})
const formData = new FormData()
formData.append('name', 'lucardo3')
formData.append('age', '20')
type QueryKey = [string, Options?]
export function RequestDataType() {

  const { data: data, isLoading: isLoading } = useQuery({
    queryKey: ['success/200', 'x-www-form-urlencoded', 'get'],
    queryFn: () => kyInstance('success/200', {
      method: 'post',
      body: new URLSearchParams({
        name: 'lucardo',
        age: '20'
      })
    }).json()
  })

  const { data: data2, isLoading: isLoading2 } = useQuery({
    queryKey: ['success/200', 'x-www-form-urlencoded', 'post'],
    queryFn: () => kyInstance.post('success/200', {
      body: new URLSearchParams({
        name: 'lucardo2',
        age: '20'
      })
    }).json()
  })


  const { data: data3, isLoading: isLoading3 } = useQuery({
    queryKey: ['success/200', 'formdata'],
    queryFn: () => kyInstance.post('success/200', { body: formData }).json()
  })

  const { data: data4, isLoading: isLoading4 } = useQuery({
    queryKey: ['success/200', 'post', 'json'],
    queryFn: () => kyInstance.post('success/200', {
      json: {
        name: 'lucardo4',
        age: '20'
      }
    }).json()
  })
  const { data: data5, isLoading: isLoading5 } = useQuery({
    queryKey: ['success/200', 'post', 'json', 'stringify'],
    queryFn: () => kyInstance.post('success/200', {
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        name: 'lucardo5',
        age: '20'
      })
    }).json()
  })


  const { data: data6, isLoading: isLoading6 } = useQuery({
    queryKey: ['success/200', 'post', 'searchParams'],
    queryFn: () => kyInstance.post('success/200', {
      headers: {
        'Accept': 'application/json'
      },
      searchParams: {
        name: 'lucardo6',
        age: '20'
      }
    }).json()
  })
  const { data: data7, isLoading: isLoading7 } = useQuery({
    queryKey: ['success/200', 'post', 'searchParams', 'urlencoded'],
    queryFn: () => kyInstance.post('success/200', {
      headers: {
        'Accept': 'application/json'
      },
      body: new URLSearchParams({
        name: 'lucardo7',
        age: '20'
      })
    }).json()
  })
  const { data: data8, isLoading: isLoading8 } = useQuery({
    queryKey: ['success/200', 'get'],
    queryFn: async () => {
      const resp = kyInstance('success/200')
      return await resp.json()
    }
  })
  const { data: textData, isLoading: isLoadingText } = useQuery({
    queryKey: ['success/200', 'get', 'text'],
    queryFn: async () => {
      const resp = kyInstance('success/200',{
        headers: {
          'Accept': 'text/plain'
        }
      })
      const text = await resp.text()
      console.log('resp', text);
      
      return text
    }
  })

  const { data: arrayBufferData, isLoading: isLoadingArrayBuffer } = useQuery({
    queryKey: ['success/200', 'get', 'arrayBuffer'],
    queryFn: async () => {
      const resp = kyInstance('success/200')
      return await resp.arrayBuffer()
    }
  })
  useEffect(()=>{
   console.log('arrayBufferData', arrayBufferData);
   
  },[arrayBufferData])


  return <main className="p-4">

    <h2 className="text-2xl font-bold mb-4">success/200 get x-www-form-urlencoded响应内容</h2>
    <pre>
      {isLoading ? 'loading...' : JSON.stringify(data, null, 2)}
    </pre>

    <h2 className="text-2xl font-bold mb-4">success/200 post x-www-form-urlencoded响应内容</h2>
    <pre>
      {isLoading2 ? 'loading...' : JSON.stringify(data2, null, 2)}
    </pre>

    <h2 className="text-2xl font-bold mb-4">success/200 post formdata响应内容</h2>
    <pre>
      {isLoading3 ? 'loading...' : JSON.stringify(data3, null, 2)}
    </pre>

    <h2 className="text-2xl font-bold mb-4">success/200 post json响应内容</h2>
    <pre>
      {isLoading4 ? 'loading...' : JSON.stringify(data4, null, 2)}
    </pre>

    <h2 className="text-2xl font-bold mb-4">success/200 post json响应内容 使用stringify 和 headers</h2>
    <pre>
      {isLoading5 ? 'loading...' : JSON.stringify(data5, null, 2)}
    </pre>

    <h2 className="text-2xl font-bold mb-4">success/200 post json响应内容 使用searchParams参数</h2>
    <pre>
      {isLoading6 ? 'loading...' : JSON.stringify(data6, null, 2)}
    </pre>

    <h2 className="text-2xl font-bold mb-4">success/200 post json响应内容 使用URLSearchParams 赋值 searchParams</h2>
    <pre>
      {isLoading7 ? 'loading...' : JSON.stringify(data7, null, 2)}
    </pre>


    <h2 className="text-2xl font-bold mb-4">success/200 get json响应内容</h2>
    <pre>
      {isLoading8 ? 'loading...' : JSON.stringify(data8, null, 2)}
    </pre>

    <h2 className="text-2xl font-bold mb-4">success/200 get text响应内容</h2>
    <pre>
      {isLoadingText ? 'loading...' : textData}
    </pre>

   
  </main>
}